<script lang="ts" setup>
import fishIcon from "@/assets/images/home/fish.png"
import {subscribeApi} from "@/api/home"
import {ref} from "vue";
import Dialog from "@/components/dialog/dialog"
import {useI18n} from "vue-i18n";

const {t} = useI18n()

const email = ref<string>('')

const subscribe = () => {
  if (email.value.match(
    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  )) {
    subscribeApi({
      email: email.value
    }).then((res: any) => {
      console.log('subscribeApi:', res)
      Dialog(t('message.home.subscribe.success'))
      email.value = ''
    })
  } else {
    Dialog(t('message.home.subscribe.inValid'))
  }
}
</script>

<template>
  <div class="bg-white">
    <v-row class="subscribe-container">
      <v-col sm="12" md="2" lg="2" xl="2" class="xs:flex sm:flex xs:w-full">
        <img :src="fishIcon" class="fish-img xs:-mt-12 float-animation" alt=""/>
      </v-col>

      <v-col sm="12" md="5" lg="5" xl="5" class="join-wrapper">
        <div class="join">{{t('message.home.subscribe.title')}}</div>
        <div class="join-intro">{{t('message.home.subscribe.intro')}}</div>
      </v-col>
      <v-col sm="12" md="5" lg="5" xl="5" class="email-subscribe">
        <input placeholder="Enter your email" v-model="email" class="email-input"/>
        <v-btn class="subscribe-btn" @click.stop="subscribe">{{t('message.home.subscribe.btn')}}</v-btn>
      </v-col>
    </v-row>
  </div>
</template>

<style scoped lang="scss">
.subscribe-container {
  min-height: 180px;
  height: auto;
  background: linear-gradient(270deg, #FFFFFF 0%, #CDDFF7 100%);
  border-radius: 32px;
  border: 1px solid #BED4FF;
  @apply relative flex md:flex-row sm:flex-col xs:flex-col items-center xs:px-5 xs:py-4
  xs:mx-6 sm:mx-20 md:mx-10 lg:mx-[228px] xl:mx-[228px]
  xs:mt-[134px] xs:mb-[34px] md:mt-[126px] md:mb-[94px] lg:mt-[146px] lg:mb-[110px] xl:mt-[202px] xl:mb-[150px];

  .fish-img {
    @apply md:absolute md:top-0 md:left-6 lg:absolute lg:top-0 lg:left-6 xl:absolute xl:top-0 xl:left-6 sm:m-auto;
  }

  .join-wrapper {
    @apply flex flex-col justify-center xs:w-full xs:block;
  }

  .join {
    font-size: 32px;
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
    color: #161615;
    z-index: 99;
    //height: 60px;
    //line-height: 60px;

    @apply md:self-start sm:self-center xs:self-center md:justify-self-center xs:mb-8 lg:pl-8;
  }

  .join-intro {
    font-size: 20px;
    font-family: DINPro-Regular, DINPro;
    font-weight: 400;
    color: #7A7893;
    line-height: 26px;
    z-index: 99;

    @apply xs:text-center md:self-start lg:text-left sm:self-center lg:mt-5 lg:pl-8 xs:mb-2;
  }

  .email-subscribe {
    @apply flex md:flex-row sm:flex-row xs:flex-col items-center justify-center xs:inline-block xs:h-max;
  }

  .email-input {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #BED4FF;
    width: 320px;
    padding: 18px 14px;
    @apply xs:w-full lg:w-auto;
  }

  .subscribe-btn {
    box-shadow: unset !important;
    height: 66px;
    margin-left: 20px;
    background: #CDDFF7;
    border-radius: 16px;
    font-size: 20px;
    font-family: DINPro-Regular, DINPro;
    font-weight: 400;
    color: #161615;

    @apply xs:mt-1 md:mt-0 xs:mt-4 xs:ml-16;
  }

}

</style>
